<!-- 自定义底部导航栏 -->
<template>
    <view>
        <view v-if="tabType === 1" class="container">
            <view
                class="tabbar-item"
                :class="[item.centerItem ? ' center-item' : '']"
                :style="'width: calc(100% /' + tabbarList.length + ')'"
                @click="changeItem(item)"
                v-for="(item, i) in tabbarList"
				:key="i"
            >
                <view v-if="curItem === item.id" class="item-topt" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view v-else class="item-top" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view :key="i" class="item-bottom" v-if="curItem !== item.id" :class="[curItem === item.id ? 'item-active' : '']">
                    {{ item.text }}
                </view>
            </view>
        </view>
        <view v-if="tabType === 2" class="container">
            <view
                class="tabbar-item"
                :class="[item.centerItem ? ' center-item' : '']"
                :style="'width: calc(100% /' + tabbarList.length + ')'"
                @click="changeItem(item)"
                v-for="(item, i) in shopList"
				:key="i"
            >
                <view v-if="curItem === item.id" class="item-topt" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view v-else class="item-top" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view :key="i" class="item-bottom" v-if="curItem !== item.id" :class="[curItem === item.id ? 'item-active' : '']">
                    {{ item.text }}
                </view>
            </view>
        </view>

        <view v-if="tabType === 3" class="container">
            <view
                class="tabbar-item"
                :class="[item.centerItem ? ' center-item' : '']"
                :style="'width: calc(100% /' + tabbarList.length + ')'"
                @click="changeItem(item)"
                v-for="(item, i) in minList"
				:key="i"
            >
                <view v-if="curItem === item.id" class="item-topt" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view v-else class="item-top" :key="i">
                    <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
                </view>
                <view :key="i" class="item-bottom" v-if="curItem !== item.id" :class="[curItem === item.id ? 'item-active' : '']">
                    {{ item.text }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        /* 当前导航栏 */
        currPage: {
            type: Number,
            default: 0
        },
        tabType: {
            type: Number,
            default: 1
        }
    },

    data() {
        return {
            internationalization: {},
            curItem: 0, // 当前所选导航栏
            shopList: [
                {
                    id: 0,
                    pagePath: '/pages/index/index',
                    iconPath: '/static/images/1-001.png',
                    selectedIconPath: '/static/images/1-002.png',
                    text: '首页',
                    centerItem: false
                },
                {
                    id: 1,
                    pagePath: '/pages/goods_cate/goods_cate',
                    iconPath: '/static/images/2-001.png',
                    selectedIconPath: '/static/images/2-002.png',
                    text: '分类',
                    centerItem: false
                },
                {
                    id: 2,
                    pagePath: '/pages/order_addcart/order_addcart',
                    iconPath: '/static/images/3-001.png',
                    selectedIconPath: '/static/images/3-002.png',
                    text: '购物车',
                    centerItem: false
                },
                {
                    id: 3,
                    pagePath: '/pages/user/index',
                    iconPath: '/static/images/4-001.png',
                    selectedIconPath: '/static/images/4-002.png',
                    text: '我的',
                    centerItem: false
                }
            ], // 导航栏列表
            tabbarList: [
                {
                    id: 0,
                    pagePath: '/pages/Home/Home',
                    iconPath: '/static/tabber/Homepagedefault.png',
                    selectedIconPath: '/static/tabber/Homepageselection.png',
                    text: '',
                    centerItem: false
                },
                {
                    id: 1,
                    pagePath: '/pages/index/index',
                    iconPath: '/static/tabber/Malldefault.png',
                    selectedIconPath: '/static/tabber/Mallselection.png',
                    text: '',
                    centerItem: false
                },
                {
                    id: 2,
                    pagePath: '/pages/Lease/Lease',
                    iconPath: '/static/tabber/Leasedefault.png',
                    selectedIconPath: '/static/tabber/Leaseselection.png',
                    text: '',
                    centerItem: false
                },
                {
                    id: 3,
                    pagePath: '/pages/Messag/msg',
                    iconPath: '/static/tabber/Messagedefault.png',
                    selectedIconPath: '/static/tabber/Messageselection.png',
                    text: '',
                    centerItem: false
                },
                {
                    id: 4,
                    pagePath: '/pages/Personalcenter/Personalcenter',
                    iconPath: '/static/tabber/PersonalCenterdefault.png',
                    selectedIconPath: '/static/tabber/PersonalCenterselection.png',
                    text: '',
                    centerItem: false
                }
            ], // 导航栏列表
            minList: [
                {
                    id: 0,
                    pagePath: 'pages/chat/chat',
                    iconPath: 'static/tarbar/chat.png',
                    selectedIconPath: 'static/tarbar/chat_active.png',
                    text: '消息'
                },
                {
                    id: 1,
                    pagePath: 'pages/friend/friend',
                    iconPath: 'static/tarbar/friend.png',
                    selectedIconPath: 'static/tarbar/friend_active.png',
                    text: '好友'
                },
                {
                    id: 2,
                    pagePath: 'pages/group/group',
                    iconPath: 'static/tarbar/group.png',
                    selectedIconPath: 'static/tarbar/group_active.png',
                    text: '群聊'
                },
                {
                    id: 3,
                    pagePath: 'pages/mine/mine',
                    iconPath: 'static/tarbar/mine.png',
                    selectedIconPath: 'static/tarbar/mine_active.png',
                    text: '我的'
                }
            ]
        }
    },
    // onShow() {
    // 	console.log("子组件onShow执行了---------------", this.internationalization.tab)
    // 	this.getlanguagedata();
    // 	this.curItem = this.currPage; // 当前所选导航栏
    // 	// #ifdef H5
    // 	uni.hideTabBar(); // 隐藏 tabBar 导航栏
    // 	// #endif
    // },
    // onLoad() {
    // 	console.log("子组件onLoad执行了---------------", this.internationalization.tab)
    // 	this.getlanguagedata();
    // 	this.curItem = this.currPage; // 当前所选导航栏
    // 	// #ifdef H5
    // 	uni.hideTabBar(); // 隐藏 tabBar 导航栏
    // 	// #endif
    // },
    // onLaunch() {
    // 	console.log("onLaunch执行了---------------")
    // 	this.getlanguagedata();
    // 	this.curItem = this.currPage; // 当前所选导航栏
    // 	// #ifdef H5
    // 	uni.hideTabBar(); // 隐藏 tabBar 导航栏
    // 	// #endif
    // },
    mounted() {
        console.log('子组件mounted执行了---------------')
        this.curItem = this.currPage // 当前所选导航栏
        // #ifdef H5
        uni.hideTabBar() // 隐藏 tabBar 导航栏
        // #endif
        this.getlanguagedata()
    },

    computed: {
        currentLanguage() {
            return this.$store.state.internationalization.language
        }
    },
    watch: {
        currentLanguage(newLang, oldLang) {
            console.log(`Language changed from ${oldLang} to ${newLang}`)
            // 这里可以根据语言的变化执行一些操作
        }
    },
    // created() {
    // 	this.unsubscribe = this.$store.state.subscribeAction((mutation, state) => {
    // 		if (mutation.type.startsWith('internationalization/')) {
    // 			console.log('Mutation in internationalization module:', mutation);
    // 			console.log('Current state of language:', state.internationalization.language);
    // 		}
    // 	});
    // },
    methods: {
        getlanguagedata() {
            this.internationalization = this.$store.getters['internationalization/getinternationalization']
            this.tabbarList[0].text = this.internationalization.tab.home
            this.tabbarList[1].text = this.internationalization.tab.shop
            this.tabbarList[2].text = this.internationalization.tab.rental
            this.tabbarList[3].text = this.internationalization.tab.message
            this.tabbarList[4].text = this.internationalization.tab.user
        },
        /* 导航栏切换 */
        changeItem(e) {
            console.log('我被点击了', e.pagePath)
            // this.getlanguagedata()
            // if (this.tabType === 1) {
            uni.switchTab({
                url: e.pagePath
            }) // 跳转到其他 tab 页面

            // } else {
            // 	if (this.shopList[0].pagePath == '/pages/ShopCenter/index/index') {
            // 		uni.switchTab({
            // 			url: e.pagePath
            // 		});
            // 	} else {
            // 		uni.navigateTo({
            // 			url: e.pagePath
            // 		});
            // 	}
            // }
        }
    }
}
</script>

<style lang="scss" scoped>
$textDefaultColor: #999; // 文字默认颜色
$bottomBg: #fff; // 底部背景
$textSelectedColor: #67c23a; // 文字选中颜色
$centerItemBg: #fff; // 中间凸起按钮背景

.container {
    z-index: 10000;
    position: fixed;
    bottom: -2px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 8vh;
    color: $textDefaultColor;
    padding: 5rpx 0;
    background-color: $bottomBg;
    box-shadow: 0 0 10rpx #999;
    overflow: hidden;

    .tabbar-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;

        .item-top {
            flex-shrink: 0;
            width: 65rpx;
            height: 50%;
            padding: 4rpx;

            image {
                width: 60%;
                height: 70%;
            }
        }

        .item-topt {
            flex-shrink: 0;
            width: 70rpx;
            height: 60%;
            padding: 4rpx;
            border-radius: 50%;
            background: rgba(47, 212, 184, 0.55);
            display: flex;
            justify-content: center;
            align-items: center;

            image {
                width: 60%;
                height: 70%;
            }
        }

        .item-bottom {
            width: 100%;
            font-size: 28rpx;
        }

        .item-active {
            color: $textSelectedColor;
        }
    }

    .center-item {
        position: relative;

        .item-top {
            position: absolute;
            top: -55rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 105rpx;
            height: 105rpx;
            background-color: $centerItemBg;
            border-radius: 50%;
        }

        .item-bottom {
            position: absolute;
            bottom: 5rpx;
        }
    }
}
</style>
